<template>
	<view class="wrap">
		<view class="menu">
			<view v-if="title" class="room-title">{{ title }}</view>
			<view class="tit">
				<text>姓名</text>
				<text style="padding-right: 140upx;">操作</text>
			</view>
			<view class="borderBottom column" v-for="(item, index) in menuInfo.list" :key="index" :class="menuInfo.base.class">
				<text v-text="item[ele]" v-for="(ele, index) in menuInfo.base.menuProp" :key="index"></text>
				<view>
					<button :class="button.class" @click="setStatus(item, button)" v-for="(button, btnIndex) in buttons[index]" :key="btnIndex">{{ button.name }}</button>
				</view>
			</view>
			<view style="margin-top: 20upx;" v-if="menuInfo.list.length > 0"><button class="loginBtn" @click="finishCheck">完成</button></view>
		</view>
		<view class="changePage">
			<button class="loginBtn" @click="changePage('pre')" :disabled="!roomInfo.preRoomId" :class="!roomInfo.preRoomId?'disableBtn':''">上一页</button>
			<button class="loginBtn" @click="changePage('next')" :disabled="!roomInfo.nextRoomId" :class="!roomInfo.preRoomId?'disableBtn':''">下一页</button>
		</view>
	</view>
</template>

<script>
import dictMixins from '@/libs/dictMixins.js';
import dormMixins from '@/libs/dormMixins.js';
export default {
	mixins: [dictMixins, dormMixins],
	data() {
		return {
			pageOptions: '',
			title: '',
			roomInfo: '',
			menuInfo: {
				base: {
					tit: ['姓名', '操作'],
					menuProp: ['stuName', 'operation'],
					class: 'typeThr'
				},
				list: []
			},
			pageParams: {
				pageNum: 1,
				pageSize: 20
			}
		};
	},
	onShow() {
		this.pageOptions = this.getPageOptions();
		this.fetchData(this.pageOptions);
	},
	methods: {
		async fetchData(pageOptions) {
			let resp = await this.fetchRoomStu({ ...pageOptions, ...this.pageParams });
			let list = resp.rows;
			let roomInfo = (this.roomInfo = resp.roomInfo);
			this.title = `${roomInfo.bdName}-${roomInfo.flrName}-${roomInfo.roomCode}`;
			this.menuInfo.list = list;
		},
		setStatus(row, button) {
			row.status = button.value;
		},
		async finishCheck() {
			let list = this.menuInfo.list.map(item => {
				let obj = {
					id: item.id,
					stuId: item.stuId,
					status: item.status,
					roomId: item.roomId
				};
				return obj;
			});
			let haveNoCheck = list.some(item => {
				return item.status != 0 && !item.status;
			});
			if (haveNoCheck) {
				uni.showToast({
					title: '请提交所有人的查寝信息',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			let resp = await this.saveRoomStuAct(list);
			uni.showToast({
				title: '提交成功',
				icon: 'none',
				duration: 1000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		},
		changePage(type) {
			if (type == 'pre') {
				this.pageOptions.roomId = this.roomInfo.preRoomId;
			} else {
				this.pageOptions.roomId = this.roomInfo.nextRoomId;
			}
			this.fetchData(this.pageOptions);
		}
	},
	components: {},
	computed: {
		buttons() {
			let btnArr = this.menuInfo.list.map(row => {
				let btns = this.findOneDictList('dict_dormitory_checking_status').map(btn => {
					btn.class = ['statusButton'];
					if (row.status == btn.value) {
						btn.class.push('active');
					}
					return btn;
				});
				return btns;
			});
			return btnArr;
		}
	}
};
</script>

<style lang="scss" scoped>
.room-title {
	text-align: center;
}
.tit {
	display: flex;
	justify-content: space-between;
	width: 650upx;
	background: #fff;
	z-index: 99;
	text {
		font-size: 30upx;
		line-height: 100upx;
		font-weight: 600;
	}
}
.statusButton {
	width: 110upx;
	height: 60upx;
	border-radius: 4px;
	font-size: 24upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	display: inline-block;
	line-height: 60upx;
	text-align: center;
	margin-left: 20upx;
}
.active {
	background-color: green;
	color: #fff;
}

.menu {
	padding: 0 50upx 120upx 50upx;

	.column {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	navigator {
		flex: 0 1 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tit {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28upx;
			line-height: 100upx;
			font-weight: 600;
		}
	}

	.next {
		margin-left: auto;
		float: right;
	}
}

page {
	min-height: 100%;

	.wrap {
		min-height: 100%;
		padding-top: 20upx;
	}

	.submitButtonActive {
		position: fixed;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.changePage {
	display: flex;
	justify-content: space-around;
}
.disableBtn{
	background:#b3c4f7  !important;
}
</style>
